<template>
	<view>
		<Newmsg ref="newmsg" :newmsg="newmsg"></Newmsg>
		<view class="copyright">&copy;mala.cn</view>
		<view class="header" :style="{paddingTop:(barHeight) + 'px'}">
			<view class="setting-item"></view>
			<view class="userBox">
				<view class="baseInfo">
					<view class="avatar"v-if="hasLogin">
						<image :src="avatar"></image>
					</view>
					<view class="avatar"  @click="goLogin" v-else="hasLogin">
						<image :src="avatar"></image>
					</view>
					<view class="userData" v-if="hasLogin">
						<view class="uname">{{userInfo.user_name?userInfo.user_name:userInfo.user_penname}}
							<view v-if="userInfo.user_type==3" class="u3">
								<view class="iconfont icon-shidirenzheng"></view>
							</view>
						</view>
						<view v-if="userInfo.user_type==3" class="desc">
							<text class="minitag">{{userInfo.user_verify}}</text>
						</view>
						<view class="desc" v-else>{{userInfo.user_phone}}</view>
					</view>
					<view class="userData" v-else @click="goLogin">
						<view class="uname loginText">[点击登录]</view>
						<view class="desc">登录后即可享受全部功能</view>
					</view>
				</view>
				<view class="right-event">
					<view class="setting" v-if="hasLogin" @click="setting">
						<i class="iconfont icon-setting"></i>
						账号设置
					</view>
				</view>
			</view>
			<view class="userCount">
				<view class="userCount-lable">
					<view class="num">{{userCount.my}}</view>
					<view class="key">我的留言</view>
				</view>
				<view class="userCount-lable">
					<view class="num">{{userCount.pj}}</view>
					<view class="key">未评价</view>
				</view>
				<view class="userCount-lable">
					<view class="num">{{userCount.cl}}</view>
					<view class="key">等待处理</view>
				</view>
			</view>
		</view>
		<u-gap height="10" bgColor="#f2f2f2" v-if="hasLogin"></u-gap>
		<view class="grid" v-if="hasLogin">
			<!-- <view class="grid-title">
				我的
			</view> -->
			<view class="grid-list">

				<view class="grid-list-item" @click="mypost">
					<view class="grid-list-icon"><i class="iconfont icon-dingdan"></i></view>
					<view class="grid-list-name">我的留言</view>
				</view>

				<view class="grid-list-item">
					<view class="grid-list-icon"><i class="iconfont icon-biaoxing"></i></view>
					<view class="grid-list-name">我的评星</view>
				</view>

				<view class="grid-list-item">
					<view class="grid-list-icon"><i class="iconfont icon-liuyan"></i></view>
					<view class="grid-list-name">我的评论</view>
				</view>

				<view class="grid-list-item">
					<view class="grid-list-icon"><i class="iconfont icon-xihuan"></i></view>
					<view class="grid-list-name">我的点赞</view>
				</view>

			</view>
		</view>
		<u-gap height="10" bgColor="#f2f2f2"></u-gap>
		<view class="tools">
			<view class="tools-item" @click="goPage(1)">
				<view class="t"><i class="iconfont icon--fuwu-xianxing" />服务协议</view>
				<view class="arrow"><i class="iconfont icon-xiangyoujiantou"></i></view>
			</view>

			<view class="tools-item" @click="goPage(2)">
				<view class="t"><i class="iconfont icon-guize" />留言流程</view>
				<view class="arrow"><i class="iconfont icon-xiangyoujiantou"></i></view>
			</view>

			<view class="tools-item" @click="goPage(3)">
				<view class="t"><i class="iconfont icon-wenti-xianxing" />常见问题</view>
				<view class="arrow"><i class="iconfont icon-xiangyoujiantou"></i></view>
			</view>

			<view class="tools-item" @click="goPage(4)">
				<view class="t"><i class="iconfont icon-fujian" />关于群众呼声-四川省网上群众工作台</view>
				<view class="arrow"><i class="iconfont icon-xiangyoujiantou"></i></view>
			</view>

			<view class="style_button defaultColor" @click="dologout" v-if="hasLogin">退出</view>

		</view>
	</view>
</template>


<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getUserProfile
	} from '@/api/api.js';
	
	import Newmsg from '@/uni_modules/Lylist/newmsg.vue';
	export default {
		components: {
			Newmsg
		},
		data() {
			return {
				newmsg:true,
				barHeight: "",
				avatar: "/static/img/avatar.png",
				userCount: {
					"my": '-',
					"pj": "-",
					"cl": "-"
				}
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight * 2
			if (this.hasLogin) {
				this.getUserInfo()
			}
		},
		onShow() {
			this.newmsg = true
		},
		onHide() {
			this.newmsg = false
		},
		watch: {
			hasLogin() {
				this.getUserInfo()
			}
		},
		methods: {
			...mapMutations(['userLogin', 'logout']),
			mypost(){
				uni.navigateTo({
					url:'/pages/user/mypost'
				})
			},
			goPage(p){
				uni.navigateTo({
					url:'/pages/user/page?p='+p
				})
			},
			dologout() {
				this.logout()
			},
			setting() {
				uni.navigateTo({
					url: "/pages/user/setting"
				})
			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/user/login"
				})
			},
			getUserInfo() {
				let _this = this;
				getUserProfile({count:1}).then(r => {
					if (r.data.code == 200) {
						_this.userCount = {
							"my": r.data.data.userCount.my,
							"pj": r.data.data.userCount.pj,
							"cl": r.data.data.userCount.cl
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.setting {
		height: 80rpx;
		width: 100px;
		line-height: 80rpx;
		font-size: 26rpx;
		text-align: center;
		color: #fff;
		background-image: linear-gradient(to right, #668eeb, $base-color);
		background-color: #153afa;
		position: absolute;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30px 0 0 30px;

		.iconfont {
			margin-right: 4rpx;
		}
	}

	.copyright {
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #ddd;
		font-size: 24rpx;
	}

	.defaultColor {
		background-image: -webkit-linear-gradient(left, #668eeb, $base-color);
		background-image: -moz-linear-gradient(left, #668eeb, $base-color);
		background-image: linear-gradient(to right, #668eeb, $base-color);
		background-color: $base-color;
		margin: 40rpx;
		color: #fff;
	}

	.header {
		background-image: -webkit-linear-gradient(left, #668eeb, $base-color);
		background-image: -moz-linear-gradient(left, #668eeb, $base-color);
		background-image: linear-gradient(to right, #668eeb, $base-color);
		background-color: $base-color;
		padding: 40rpx 0;

		.userCount {
			padding-top: 30rpx;
			display: flex;

			&-lable {
				width: 33%;
				text-align: center;
				color: #fff;

				.num {
					font-size: 28rpx;
				}

				.key {
					font-size: 28rpx;
				}
			}
		}

		.userBox {
			padding: 40rpx;
			display: flex;
			justify-content: space-between;
			position: relative;

			&:before {
				content: '';
				position: absolute;
				z-index: 2;
				bottom: 0;
				left: 30px;
				width: 85%;
				height: 1px;
				border-bottom: 1px solid #7e99eb;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				-webkit-transform-origin: 0 100%;
				transform-origin: 0 100%
			}

			.baseInfo {
				display: flex;
				align-items: center;
				width: calc(100% - 100rpx);

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 100%;
					background-color: #fff;
					border: 1px solid #fff;
					padding: 2rpx;

					image {
						width: 120rpx;
						border-radius: 100%;
						height: 120rpx;
					}

					.icon {
						width: 120rpx;
						height: 120rpx;
					}
				}

				.userData {
					width: calc(100% - 144rpx);
					margin-left: 20rpx;
					color: #fff;

					.uname {
						font-size: 36rpx;
						font-weight: bold;
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 44rpx;
							font-weight: normal;
							margin-left: 10rpx;
							margin-top: 4rpx;
						}
					}

					.desc {
						font-size: 28rpx;
						margin-top: 10rpx;

						.minitag {
							background-color: #fff;
							color: $base-color;
							padding: 6rpx 10rpx;
							border-radius: 10rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}

	.grid {
		padding: 20rpx;

		&-title {
			font-size: 32rpx;
			position: relative;
			padding-left: 25rpx;
			font-weight: bold;

			&::after {
				content: " ";
				display: inline-block;
				height: 28rpx;
				width: 4px;
				position: absolute;
				top: 8rpx;
				left: 0px;
				background: #2873ff;
				border-radius: 1px;

			}
		}

		.grid-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 20rpx;

			&-item {
				width: 25%;
				text-align: center;

				.grid-list-icon {
					.iconfont {
						color: #000;
						font-size: 40rpx;
					}
				}

				.grid-list-name {
					margin-top: 10rpx;
					color: #000;
					font-size: 28rpx;
				}
			}
		}
	}

	.tools {

		.tools-item {
			padding: 30rpx 40rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #eee;

			.t {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #333;

				.iconfont {
					color: #333;
					font-size: 40rpx;
					margin-right: 10rpx;
					color: $base-color;
				}
			}
		}
	}
</style>